<script lang="ts" setup>
import type { UploadInstance } from 'element-plus'
import type { VxeTableInstance } from 'vxe-table'

import { useBuyerChildImportData, useBuyerChildImportTemplate, useGetBuyerChildList } from '@fl/api/purchase'
import { ElButton, ElCard } from 'element-plus'
import { ref } from 'vue'

import Add from './add.vue'
import Edit from './edit.vue'

const uploadRef = ref<UploadInstance>()

const { data, isLoading } = useGetBuyerChildList()
const tableData = ref()
const { isPending, mutateAsync } = useBuyerChildImportTemplate()
const { isPending: ImportDataLoading, mutate: ImportDataMutate } = useBuyerChildImportData()

const parentId = ref('')
const addVisible = ref(false)
const id = ref('')
const editVisible = ref(false)

function showAdd() {
    parentId.value = ''
    addVisible.value = true
}

function addSub(row: any) {
    parentId.value = row.id
    addVisible.value = true
}

function showEdit(row: any) {
    id.value = row.id
    editVisible.value = true
}

const tableRef = ref<VxeTableInstance>()

async function downTemplate() {
    const res = await mutateAsync()
    if (res) {
        const objectUrl = URL.createObjectURL(res)
        location.href = objectUrl
        URL.revokeObjectURL(objectUrl)
    }
}

async function uploadFile(uploadFile) {
    // 创建 FormData 对象
    const param = new FormData()
    param.append('file', uploadFile.file)

    ImportDataMutate((param as any), {
        onSuccess: (res: any) => {
            ElMessage.success(res)
        },
    })
}

watchEffect(() => {
    if (data.value)
        tableData.value = toRaw(data.value)
})
</script>

<template>
    <el-skeleton v-if="isLoading"
                 :rows="5"
    />

    <div v-else>
        <ElCard>
            <div class="mb-20 text-16 font-700">
                子公司管理
            </div>

            <div class="mb-20 flex gap-20">
                <ElButton type="primary"
                          @click="showAdd"
                >
                    <div class="i-ic:baseline-add size-16" />
                    新增子公司
                </ElButton>

                <ElUpload ref="uploadRef"
                          :show-file-list="false"
                          :http-request="uploadFile"
                >
                    <template #trigger>
                        <ElButton type="primary"
                                  :loading="ImportDataLoading"
                        >
                            <div class="i-iconamoon:upload size-16" />
                            批量导入
                        </ElButton>
                    </template>
                </ElUpload>

                <ElButton type="primary"
                          :loading="isPending"
                          @click="downTemplate"
                >
                    <div class="i-iconamoon:upload size-16" />
                    下载模板
                </ElButton>
            </div>

            <vxe-table ref="tableRef"
                       :column-config="{ resizable: true }"
                       :tree-config="{ transform: true, rowField: 'id', parentField: 'parentId' }"
                       :data="tableData"
                       :height="600"
            >
                <vxe-column field="name"
                            title="子公司名称"
                            tree-node
                            :width="250"
                            align="center"
                />

                <vxe-column field="addr"
                            title="公司地址"
                            align="center"
                />

                <vxe-column field="createTime"
                            title="创建时间"
                            align="center"
                />

                <vxe-column field="createBy"
                            title="创建人"
                            align="center"
                />

                <vxe-column field="userName"
                            title="初始账号"
                            align="center"
                />

                <vxe-column title="操作"
                            align="center"
                >
                    <template #default="{ row }">
                        <div class="flex gap-15 justify-center"
                             :style="{ color: 'var(--el-color-primary)' }"
                        >
                            <span class="cursor-pointer"
                                  @click="showEdit(row)"
                            >
                                编辑
                            </span>

                            <span class="cursor-pointer"
                                  @click="addSub(row)"
                            >
                                新增下级子公司
                            </span>
                        </div>
                    </template>
                </vxe-column>
            </vxe-table>
        </ElCard>

        <Add :key="parentId"
             v-model:parent-id="parentId"
             v-model:visible="addVisible"
        />

        <Edit :key="id"
              v-model:id="id"
              v-model:visible="editVisible"
        />
    </div>
</template>
